<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="expression">
    <div class="left-container">
      <el-input v-model="query" class="select-input" clearable placeholder="请输入内容筛选" />
      <div class="transition-container">
        <div v-for="(item, index) in filteredData" :key="index" class="column-item" draggable="true"
          @dragstart="handleDragStart($event, item, 'dragstart')" @darg="handleDragOver" @dragend="handleDragEnd"
          @click="handleClick(item.name)">
          <span class="column-item-text">
            <span style="float: left">{{ item.name }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.type }}</span>
          </span>
        </div>
      </div>
    </div>
    <div class="right-container">
      <div class="expression-container" @dragenter="targetDragEnter" @dragover="targetDragOver"
        @dragleave="targetDragLeave" @drop="targetDragEnd">
        <span v-for="(item, index) in expression" :key="'expression' + index" class="expression-item"
          :class="expressionIndex === index ? 'cursor' : 'placeholder'" @click="expressionIndex = index">{{ item }}</span>
      </div>
      <div class="operator-container">
        <div v-for="(item, index) in operatorData" :key="index" class="operator-item" draggable="true"
          @dragstart="handleDragStart($event, { name: item })" @darg="handleDragOver" @dragend="handleDragEnd"
          @click="handleClick(item)">
          {{ item }}
        </div>
        <div class="operator-num">
          <el-input-number v-model="operatorNum" :controls="false" />
          <el-button type="primary" @click="addOperatorNum()">添加</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed, nextTick, onUnmounted } from "vue"
import { questionMark } from 'src/utils/designerTool/constants'
import { init } from "echarts";
const props = defineProps({
  columnData: {
    type: Array,
    default: () => {
      return []
    }
  },
  params: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
const items = ref(<any>[])
const dragging = ref(null)
const query = ref('')
const expression = ref(<any>[''])
const expressionIndex = ref(0)
const operatorNum = ref(0)
const filteredData = computed(() => {
  return items.value.filter((item: any) => {
    return item?.name.indexOf(query.value) > -1 || item?.type.indexOf(query.value) > -1
  })
})
const operatorData = computed(() => {
  return ['+', '-', '*', '/', '(', ')', '[', ']']
})
onMounted(() => {
  items.value = JSON.parse(JSON.stringify(props.columnData))
  nextTick(() => {
    init()
  })
})
onUnmounted(() => {
  document.onkeydown = null
})
function init() {
  document.onkeydown = (e) => {
    // 事件对象兼容
    const e1 = e || event || window.event
    // 键盘按键判断:左箭头-37;上箭头-38；右箭头-39;下箭头-40
    if (e1) {
      switch (e1.keyCode) {
        case 8:
          if (expressionIndex.value > 0) {
            expression.value.splice(expressionIndex.value, 1)
            expressionIndex.value--
          }
          break
        case 37:
          if (expressionIndex.value > 0) {
            expressionIndex.value--
          }
          break
        case 39:
          if (expressionIndex.value < (expression.value.length - 1)) {
            expressionIndex.value++
          }
          break
        default:
      }
    }
  }

  if (props.params.data) {
    let paramsData = []
    if (Array.isArray(props.params.data)) {
      paramsData = props.params.data
    }
    expression .value= expression .value.concat(paramsData)
    expressionIndex.value = expression .value.length - 1
  }
}
function handleDragStart(event:any, item:any, type:any) {
  // console.log('块开始', event)
  dragging.value = item.name
  const target = event.target
  target.setAttribute('dragging', 'true')
  const dt = event.dataTransfer
  dt.dropEffect = 'move'
  dt.effectAllowed = 'move'
}
function handleDragEnd(event:any) {
  // console.log('块结束', event)
  dragging.value = null
  if (event) {
    const target = event.target
    target.removeAttribute('dragging')
  }
}
// 首先把div变成可以放置的元素，即重写dragenter/dragover
function handleDragOver(event:any) {
  // console.log('块移动', event)
}
function targetDragEnter(event:any) {
  // console.log('进入目标', event)
  event.target.style.borderColor = '#006EFF'
}
function targetDragOver(event:any) {
  // console.log('目标中移动')
  event.preventDefault()
}
function targetDragLeave(event:any) {
  // console.log('目标中离开')
  event.target.style.borderColor = '#ffffff'
}
function targetDragEnd(event:any) {
  // console.log('目标中结束', event)
  // console.log('目标中结束', dragging.value)
  if (event) {
    event.target.style.borderColor = '#ffffff'
  }
  expression .value.splice(expressionIndex.value + 1, 0, dragging.value)
  expressionIndex.value++
}
function saveCommit() {
  const data = expression .value
  data.splice(0, 1)
  return {
    node: data,
    form: data
  }
}
function handleClick(item:any) {
  dragging.value = item
  targetDragEnd()
  handleDragEnd()
}
function addOperatorNum() {
  dragging.value = operatorNum.value
  targetDragEnd()
}
</script>

<style lang="scss" scoped>
.expression {
  height: calc(59vh - 152px);
  border: 1px solid #ebeef5;
  border-radius: 4px;
  display: flex;

  .left-container {
    border-right: 1px solid #ebeef5;

    .select-input {
      padding: 10px;

      ::v-deep.el-input__suffix {
        right: 14px;
      }
    }

    .transition-container {
      width: 250px;
      border-top: 1px solid #ebeef5;
      overflow: auto;
      height: calc(100% - 56px);

      .column-item {
        background: white;
        border: 1px dashed white;

        .column-item-text {
          height: 30px;
          line-height: 30px;
          padding: 0 14px;
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          display: block;
          box-sizing: border-box;
          cursor: pointer;
        }

        /*禁止选中文本*/
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        -khtml-user-select: none;
        user-select: none;
        cursor: grab;

        &:active {
          z-index: 1;
          cursor: grabbing;
          opacity: .618;
        }

        &:hover {
          background: #f5f7fa;
        }

        &[dragging] {
          border: 1px dashed gray;
          background: #f5f7fa;
        }

      }
    }
  }

  .right-container {
    height: 100%;
    flex: 1;

    .expression-container {
      height: calc(75% - 4px);
      width: calc(100% - 4px);
      border: 1px dashed white;
      margin: 2px;
      padding: 10px;

      .expression-item {
        margin: 0 8px 8px 0;
        display: inline-block;

        &.placeholder {
          border-right: 1px solid white;
        }

        &.cursor {
          &::after {
            content: "";
            position: relative;
            top: 2px;
            right: -4px;
            display: inline-block;
            border-right: 1px solid rgb(0 0 0);
            animation: fadenum 1s infinite;
            height: 13px;
          }
        }

        &:hover {
          background: rgb(233, 233, 235);
        }
      }
    }

    .operator-container {
      height: 25%;
      width: 100%;
      border-top: 1px solid #ebeef5;
      padding: 10px;

      .operator-item {
        border: 1px solid #dcdfe6;
        padding: 8px 12px;
        border-radius: 4px;
        margin-right: 8px;
        display: inline-block;
        cursor: pointer;
      }

      .operator-num {
        margin-top: 10px;

        .el-button {
          margin-left: 10px;
        }
      }
    }
  }
}

@keyframes fadenum {

  /*设置内容由显示变为隐藏*/
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
</style>
